<script setup lang="ts">
import { useCards } from "@/views/home/components/cards/hooks.tsx";
import { HomeCardsProps } from "@/views/home/components/cards/types.ts";
import HomeCardView from "@/views/home/components/cards/card.vue";

defineOptions({
	name: "HomeCardsView",
});
const props = withDefaults(defineProps<HomeCardsProps>(), {
	cardWidth: "0px",
	esIndexInfos: () => [],
});

const emit = defineEmits(["delete-index", "checkboxChange"]);

const handleDeleteIndex = (value: string) => {
	emit("delete-index", value);
};

const checkboxChange = (index: string) => {
	emit("checkboxChange", index);
};

const { esIndexInfos, cardWidth } = useCards(props);
</script>

<template>
	<div class="home-cards-view">
		<a-flex wrap="wrap" gap="small">
			<home-card-view
				v-for="(esIndexInfo, index) in esIndexInfos"
				:key="index"
				:card-width="cardWidth"
				:es-index-info="esIndexInfo"
				@delete-index="handleDeleteIndex"
				@checkbox-change="checkboxChange"
			/>
		</a-flex>
	</div>
</template>

<style scoped lang="scss">
.home-cards-view {
	width: 100%;
}
</style>
